<template>
    <div>
        <van-nav-bar title="频道管理"></van-nav-bar>
        <div class="box">
            <div class="select">
                <div>
                    <span class="title1">我的频道</span>
                    <span class="title2">点击{{ isEdit ? '删除' : '进入' }}频道</span>
                </div>
                <van-button plain round type="danger" size="small" @click="edit()">{{ isEdit ? '完成' : '编辑' }}
                </van-button>
            </div>
            <div class="btnBox">
                <van-row gutter="6" type="flex" align="10">
                    <van-col span="6" v-for="item in userList" :key="item.id">
                        <van-icon name="cross" color="#000" size="10" v-show="isEdit === true && item.name !== '推荐'" />
                        <van-button type="default" @click="del(item)">{{ item.name }}</van-button>
                    </van-col>
                </van-row>
            </div>

            <div class="select">
                <div>
                    <span class="title1">推荐频道</span>
                    <span class="title2">点击添加频道</span>
                </div>
            </div>

            <div class="btnBox">
                <van-row gutter="6">
                    <van-col span="6" v-for="item in unCheckList" :key="item.id" @click="moreFn(item)">
                        <van-button type="default">{{ item.name }}</van-button>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    userList: Array,
    unCheckList: Array
  },
  data () {
    return {
      isEdit: false
    }
  },
  methods: {
    edit () {
      this.isEdit = !this.isEdit
    },
    moreFn (e) {
      if (this.isEdit === true) {
        this.$emit('addChannel', e)
      }
    },
    del (e) {
      if (this.isEdit === true && e.id !== 0) {
        this.$emit('delChannel', e)
      } else if (this.isEdit === false) {
        this.$emit('jumpChannel', e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;

    .select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;

        .title1 {
            font-size: 18px;
            color: #323233;
        }

        .title2 {
            font-size: 14px;
            color: #ccc;
            margin-left: 10px;
        }

        /deep/ .van-button {
            height: 20px;
        }
    }

    .btnBox {
        /deep/ .van-button {
            background: #f4f5f6;
            font-size: 15px;
            width: 100%;
            margin-bottom: 6px;
        }

        /deep/.van-col--6 {
            position: relative;
        }

        /deep/ .van-button--normal {
            padding: 0;
        }

        .van-icon-cross {
            position: absolute;
            z-index: 999;
            right: 0;
            border: 1px solid black;
            border-radius: 50%;
        }
    }
}
</style>
